<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="dbOperator.*,java.sql.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
function getLibrarianList(){
	 var xhr = new XMLHttpRequest();
        xhr.open("POST", "ShowUserList", true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("searchinfo=" + document.getElementById("searchinfo").value + "&searchtype=" + document.getElementById("id").value);
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("userList").innerHTML = xhr.responseText;
            }
        }
}
function pressEnter(submitButton) {
    if (event.keyCode == 13) {
            document.getElementById(submitButton).click();
    }
}
function ajaxSubmit(formName,servletName) {
	$.ajax({
        type: "POST",//方法
        url: servletName,//表单接收url
        data: $(formName).serialize(),
        success: function () {
            getLibrarianList();
        },
        error : function() {
        }
    });
}

function ajaxUpdate(formName,servletName) {
	$.ajax({
		type: "POST",//方法
		url: servletName,//表单接收url
		data: $(formName).serialize(),
		success: function () {
			//alert('please modify the front-end');
			document.getElementById("Fine_front").innerHTML = document.getElementById("Fine_form").value + " RMB";
			document.getElementById("SD_front").innerHTML = document.getElementById("SD_form").value+ " RMB";
			document.getElementById("RP_front").innerHTML = document.getElementById("RP_form").value+ " day";
		},
		error : function() {
		}
		    });
		}

</script>


<title>Admin Main Page</title>
</head>
<body style="padding-top:60px; background-image:url(img/background1.jpg);" onload="getLibrarianList()">

	<div class="container bs-docs-container" style="width: 100%;">
	
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="navbar-header">
      <b class="navbar-brand" style="padding-left: 30px;"><img src="img/logo.png" style="height:25px;padding-right: 10px;">Mandarin Library - Librarian Manage Page</b>
   	</div>
   	<div class="collapse navbar-collapse" id="example-navbar-collapse">
   	<ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
            <a href="" class="dropdown-toggle" data-toggle="dropdown" >
<img src="img/user.jpg" class="img-circle" style="height:25px;">&nbsp;&nbsp;Option <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
               <li><a href="admin.jsp">Personal Information</a></li>
               <li><a href='' data-toggle='modal' data-target='#changepasswd'>Change Password</a></li>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-right" role="search" action="adminlogout">
         <button type="submit" class="btn btn-default">Logout</button>
      </form> 
   	</div>
	</nav>	

<!-- modal -->
	<div class="modal fade" id="changepasswd" tabindex="-1" role="dialog"
		aria-labelledby="changepasswd" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Change Password</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-warning">
						<p>You are going to change the password of your account!</p>
						<p>Note: Password change successfully will be automatically logged out, need to log in again!</p>
					</div>
					<form action="ModifyAdminPassword" method="post" name="cAp">
						<div class="input-group">
							<span class="input-group-addon">OldPassword:</span> <input type="text"
								class="form-control" name="confirmpwd" required>
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">NewPassword:</span> <input type="text"
								class="form-control" name="newpasswd" required>
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success"
						onclick="document.cAp.submit()">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->	

      <div class="row" style="width: 100%; margin: auto;">
        
<ul class="nav nav-stacked nav-pills col-md-2" id="PageTab">
  <li id="li-adminid" class="active"><a href="#adminid" data-toggle="tab" onclick="$('#newid2').css('display','none');$('#newid').css('display','none');$('#adminid').css('display','');" aria-expanded="true"><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;Main Page</a></li>
  <li id="li-newid" class=""><a href="#newid" data-toggle="tab" onclick="$('#newid').css('display','');$('#adminid').css('display','none');$('#newid2').css('display','none');" aria-expanded="false"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;Manage Librarian</a></li>
  <li id="li-newid2" class=""><a href="#newid2" data-toggle="tab" onclick="$('#newid2').css('display','');$('#adminid').css('display','none');$('#newid').css('display','none');" aria-expanded="false"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;&nbsp;Manage SpecificValue</a></li></ul>
  <div class="col-md-10 well" role="main" >



<!-- NAVI -->

<br>
<!-- END NAVI -->

<!-- PAGE1: ADMINID-->
<div class="tab-pane fade active in" id="adminid" >
<a name="#adminid"></a>
<div class="alert alert-warning" >
 Welcome to the Admin Manage Page!
  <br>In this page, you can manage librarians, manage system information, and manage personal information!
  </div>
<h1>Personal Information</h1>
<%Connection con = BasicOperation.getConnection(); 
  int Uid = Integer.parseInt(session.getAttribute("uid").toString());
  int Identity = AdvancedOperation.getIdentity(con,Uid);
  String PhoneNumber = AdvancedOperation.getPhoneNumberByUid(con, Uid);
  String Email = AdvancedOperation.getEmailByUid(con, Uid);
  double Fine = AdvancedOperation.getFineValue(con);
  double SecurityDeposit = AdvancedOperation.getSecurityDeposit(con);
  int ReturnPeriod = AdvancedOperation.getReturnPeriod(con);
  con.close();
%>
<table class="table table-striped" >
		<thead >
			<tr>
				<th>Information</th>
				<th>Value</th>
			</tr>
		</thead>
		<tbody>
			<tr >
				<td>Uid</td>
				<td><%=Uid %></td>
			</tr>
			<tr>
				<td>Identity</td>
				<td><%=Identity%></td>
			</tr>
			<tr>
				<td>PhoneNumber</td>
				<td><%=PhoneNumber %></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><%=Email %></td>
				
			</tr>
			</tbody>
	</table>
</div>
<!-- END PAGE1 -->

<!-- PAGE2: NEWID -->
<div class="tab-pane fade" id="newid" style="display: none;">
  <script type="text/javascript">
		
  function changePassword(id) {
		var str = id.name;
		str = str.substring(3);
	  document.getElementById('eUIDforUI').innerHTML=str ;
	  document.getElementById('UID').value=str ;
	}
	
	function editor(id){
		var str = id.name;
		str = str.substring(3);
		var ema = document.getElementById('ema'+str).innerHTML;
		var pho = document.getElementById('pho'+str).innerHTML;
		document.getElementById('LEmail').setAttribute("value", ema);
		document.getElementById('LPhoneNumber').setAttribute("value", pho);
		document.getElementById('etUIDforUI').innerHTML=str ;
		document.getElementById('mmdU').value=str ;
	}
	
	function Delete(id){
		var str = id.name;
		str = str.substring(3);
		document.getElementById('edU').value=str ;
	}
	</script>
	<%
		String searchtype = request.getParameter("types");
		String searchinfo = request.getParameter("searchinfo");
		int type = 0;
		if (searchtype == null || searchtype.equals("phoneNumber")) {
			searchtype = "phoneNumber";
			type = 0;
		} else if (searchtype.equals("Email"))
			type = 1;
		else if (searchtype.equals("uid"))
			type = 2;
		else {
			searchtype = "phoneNumber";
			type = 0;
		}
		if (searchinfo == null)
			searchinfo = "";
		session.setAttribute("type", type);
	%>
	<h1>Manage Librarian</h1>

		<a href='' data-toggle='modal' data-target='#addLibrarian'
			style="float: left; text-align: right;">I want to add a Librarian</a> 
			<br>
			<br>
			<div class="container">
		<div class="row" style="margin: 0 auto">
			<div class="col-md-4 col-lg-4">
				<div class="input-group">
					<span class="input-group-addon">Search By:</span> <select
						name="types" id="id" required class="form-control">
						<option value="phoneNumber">phoneNumber</option>
						<option value="Email">Email</option>
						<option value="uid">uid</option>
					</select>
				</div>
			</div>
			<div class="col-xs-10 col-sm-10 col-md-6 col-lg-6">
				<input type="text" name="searchinfo" id="searchinfo" class="form-control" onkeydown="pressEnter('shL')">
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
				<button id="shL" class="btn btn-success" onclick="getLibrarianList()">Search</button>
			</div>
		</div>
	</div>
		
	<script type="text/javascript">
		typeoption=document.getElementById("id").options;
		typeoption['${type}'].selected=true;
	</script>
	<div class="container" id="userList" style="width:100%;">
		
	</div>
	<!-- modal -->
	<div class="modal fade" id="addLibrarian" tabindex="-1" role="dialog"
		aria-labelledby="addLibrarian" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Librarian</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-warning">
						<p>You are going to add a new Librarian !</p>
					</div>
<form action="Register" method = 'post' name="reg">
  	
						<input name='Type' value='5' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">email:</span> <input type="text"
								class="form-control" name="email" required>
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">phoneNumber:</span> <input
								type="text" class="form-control" name="phoneNumber" required>
						</div>
						<br>
			
					
</form>

</div>
<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal" onclick="ajaxSubmit(reg,'Register')"
						>Confirm</button>
</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	<!-- modal -->
	<div class="modal fade" id="changePassword" tabindex="-1" role="dialog"
		aria-labelledby="changePassword" aria-hidden="true" style="display: none;" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Change Password !</h4>
				</div>
				<div class="modal-body">
					
							<p>
						UID:<strong  id="eUIDforUI">undefined</strong>
							<br>
		Identity:<strong
						id="">2</strong>
			  </p>
		          <form action= "changepasswd" method="post" name="CPD">
		                      <input id="UID" type="text" name="Uid" required hidden=""><br>
                  <div class="input-group">
							<span class="input-group-addon">AdminPassword:</span> <input type="text"
								class="form-control" name="Lconfirmpwd" required>
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">LibrarianNewPassword:</span> <input type="text"
								class="form-control" name="newpassword" required>
						</div>
						<br>
                  </form>
              </div>
    
    <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal" onclick="ajaxSubmit(CPD,'changePassword')">Confirm</button>
				</div>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		
	
	<!-- /.modal -->
		
<div class="modal fade" id="deleteLibrarians" tabindex="-1" role="dialog" aria-labelledby="deleteLibrarians" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
									<h4 class="modal-title">Delete Librarians</h4>
			</div>
			<div class="modal-body">
					<h4>Do you want	to delete the Librarian?</h4>
						
						    <form action="deleteLibrarians" method='post' name="del">
				 <input id="edU" type="text" name="eUid" hidden="" required><br>
				 	
				</form>
 </div><!-- /.modal-content -->
 <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
					<button type="submit" class="btn btn-primary" data-dismiss="modal" onclick="ajaxSubmit(del,'deleteLibrarians')">Confirm</button>
					
				</div>
		</div><!-- /.modal-dialog -->
	</div>
	</div>
	<!-- /.modal -->	
<!-- modal -->
	<div class="modal fade" id="EditorLMessge" tabindex="-1" role="dialog"
		aria-labelledby="EditorLMessge" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Editor Librarian</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-warning">
						<p>You are going to editor the Librarian's message!</p>
					</div>
					<p>
						UID:<strong id="etUIDforUI">undefined</strong> <br> Identity:<strong
						id="">2</strong>
					</p>
					<form action="EditorLMessage" method="post" name="edl">
						<input id="mmdU" type="text" name="TUid" required hidden="">
						<br>
						<div class="input-group">
						<span class="input-group-addon">PhoneNumber</span>
						<input type="text" class="form-control"  name="LPhoneNumber" id="LPhoneNumber">
						</div>
						<br>
						<div class="input-group">
						<span class="input-group-addon">E-Mail</span>
						<input type="text" class="form-control"  name="LEmail" id="LEmail">
						</div>	
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal" onclick="ajaxSubmit(edl,'EditorLMessage')">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</div>

<!-- END PAGE2 -->

<!-- PAGE3: NEWID2 -->
<div class="tab-pane fade" id="newid2" style="display: none;">
<div class="container" style="width:100%;">
   <h1>Manage System Attribute</h1>
  <table class="table table-striped">
		<thead>
			<tr>
				<th>SystemAttribute</th>
				<th>Value</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Fine</td>
				<td id="Fine_front"><%=Fine %> RMB</td>
			</tr>
			<tr>
				<td>SecurityDeposit</td>
				<td id="SD_front"><%=SecurityDeposit %> RMB</td>
			</tr>
			<tr>
				<td>ReturnPeriod</td>
				<td id="RP_front"><%=ReturnPeriod %> day</td>
				
			</tr>
			</tbody>
	</table>
	<div align="center">		
	<div class="row">
	<div class="col-md-9" role="main">

	<a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#editor">edit</a>

	</div>
</div>
</div>


<!-- /.modal -->	<div class="modal fade" id="editor" tabindex="-1" role="dialog" aria-labelledby="editor" aria-hidden="true" style="display: none;">

<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">System Attribute</h4>
					</div>
					<div class="modal-body">
<form action="EditorFine" method='post' name="upd">
	<div class="input-group">
		<span class="input-group-addon">Fine(RMB)</span>
		<input type="number" class="form-control" min="0" name="Fine" id="Fine_form" value="<%=Fine%>">
		
	</div>
	<br>
	<div class="input-group">
		<span class="input-group-addon">SecurityDeposit(RMB)</span>
		<input type="number" class="form-control" min="0"name="SecurityDeposit" id="SD_form" value="<%=SecurityDeposit %>">
		</div>
		<br>
		<div class="input-group">
		<span class="input-group-addon">ReturnPeriod(Day)</span>
		<input type="number" class="form-control" min="0" name="ReturnPeriod" id="RP_form" value="<%=ReturnPeriod %>">
		</div>
		<br>
		</form>
		</div>
		<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
					<button type="submit" class="btn btn-primary" data-dismiss="modal" onclick="ajaxUpdate(upd,'EditorFine')">Confirm</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>


</div>
<!-- END PAGE3 -->
</div>
</div>
</div>
</body>
</html>